<template>
  <div>
    <div
      id="thermometer"
      style="padding: 0 10px; width: 160px; height: 220px;"
    />
  </div>
</template>

<script>
  import 'echarts-liquidfill'
  import * as echarts from 'echarts';

  export default {
    name: 'Thermometer',
    props: {
      temperature: {
        type: Number,
        default: 0,
      },
      humidity: {
        type: Number,
        default: 0,
      }
    },
    watch: {
      temperature() {
        this.drawThermometerChart()
      },
      humidity() {
        this.drawThermometerChart()
      }
    },
    methods: {
      drawThermometerChart() {
        const thermometerChart = echarts.init(document.getElementById('thermometer'))

        const temperature = parseFloat(this.temperature.toFixed(1))
        const humidity = parseFloat(this.humidity.toFixed(1))
        const svgPath = 'path://M224,96c0-53.019-42.981-96-96-96S32,42.981,32,96v203.347C12.225,321.756.166,351.136.002,383.333c-.359,70.303,56.787,128.176,127.089,128.664.299.002.61.003.909.003,70.698,0,128-57.304,128-128,0-32.459-12.088-62.09-32-84.653V96zm-96,368l-.576-.002c-43.86-.304-79.647-36.544-79.423-80.42.173-33.98,19.266-51.652,31.999-66.08V96c0-26.467,21.533-48,48-48s48,21.533,48,48v221.498c12.63,14.312,32,32.164,32,66.502,0,44.112-35.888,80-80,80zm64-80c0,35.346-28.654,64-64,64s-64-28.654-64-64c0-23.685,12.876-44.349,32-55.417V96c0-17.673,14.327-32,32-32s32,14.327,32,32v232.583c19.124,11.068,32,31.732,32,55.417z' //温度计SVG路径

        const defaultSeries = {
          type: 'liquidFill', //系列类型
          shape: svgPath, //水填充图的形状 circle默认圆形  rect圆角矩形  triangle三角形  diamond菱形  pin水滴状 arrow箭头状  还可以是svg的path
          radius: '42%', //图表的大小 值是圆的直径 可以是百分比 也可以是具体值 100%则占满整个盒子 默认是40% 百分比下是根据宽高最小的一个为参照依据
          amplitude: 3, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
          waveLength: '40%', //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
          outline: { //轮廓样式
            show: true, //是否显示轮廓 布尔值
            borderDistance: 0, //外部轮廓与图表的距离 数字
            itemStyle: {
              borderColor: '#DBDBDB', //边框的颜色
              borderWidth: 0, //边框的宽度
              shadowBlur: 10, //外部轮廓的阴影范围 一旦设置了内外都有阴影
            }
          },
          backgroundStyle: {
            color: '#DBDBDB', //图表的背景颜色
          },
          itemStyle: {
            opacity: 0.6, //波浪的透明度
            shadowBlur: 10, //波浪的阴影范围
            shadowColor: '#DDDDDD' //阴影颜色
          },
          emphasis: {
            itemStyle: {
              opacity: 1 //鼠标经过波浪颜色的透明度
            }
          }
        }

        const envTempSeries = {
          name: '环境温度', //系列名称
          center: ['50%', '28%'], //图表相对于盒子的位置[水平, 垂直]，默认是[50%,50%]在水平、垂直方向居中 可设置百分比活着具体数值
          data: [{
            name: '温度', //数据项名称
            value: (temperature - 0) / 80,
            rawValue: temperature,
            label: { //图表内部字体
              normal: {
                position: ['50%', '-20%'],
                formatter: `${temperature}℃`,
                color: '#34D662',
                fontSize: 14,
              }
            },
          }],
          color: [ //水波的颜色
            new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                offset: 0,
                color: "#34D662"
              },
              {
                offset: 1,
                color: '#28C311'
              }]
            ),
          ],
        }

        const envRhSeries = {
          name: '环境湿度', //系列名称
          center: ['50%', '78%'], //图表相对于盒子的位置[水平, 垂直]，默认是[50%,50%]在水平、垂直方向居中 可设置百分比活着具体数值
          data: [{
            name: '湿度', //数据项名称
            value: (humidity - 0) / 80,
            rawValue: humidity,
            label: { //图表内部字体
              normal: {
                position: ['50%', '-20%'],
                formatter: `${humidity}%RH`,
                color: '#18C6FF',
                fontSize: 14,
              }
            },
          }],
          color: [ //水波的颜色
            new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                offset: 0,
                color: "#18C6FF"
              },
              {
                offset: 1,
                color: '#116CD7'
              }]
            ),
          ],
        }

        const option = {
          tooltip: { //提示框浮层属性
            show: false, //默认为true
          },
          series: [
            Object.assign(envTempSeries, defaultSeries),
            Object.assign(envRhSeries, defaultSeries)
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        thermometerChart.setOption(option)
      }
    },
  }
</script>